<#include "../style/ztreeStyle.html"> 
<nav>

	<SCRIPT type="text/javascript">
		var setting =
		{
			async :
			{
				enable : true,
				url : '${contextPath}/bottom/getNotesFolders',
				autoParam : [ "id=ids", "name=n", "level=lv" ],
				dataFilter : filter
			},
			view :
			{
				expandSpeed : "",
				addHoverDom : addHoverDom,
				removeHoverDom : removeHoverDom,
				selectedMulti : false
			},
			edit :
			{
				enable : true,
				renameTitle : "重命名",
				removeTitle : "删除笔记本"
			},
			data :
			{
				simpleData :
				{
					enable : true
				}
			},
			callback :
			{
				beforeDrag : beforeDrag,
				beforeDrop : beforeDrop,
				onDrop:onDrop,
				
				beforeRemove : beforeRemove,
				beforeRename : beforeRename
			}
		};
		///////////////////////////最开始的节点数据数据//////////////////////////
		var zNodes = [
		{
			id : "1",
			name : "所有笔记",
			isParent : true,
			open : false,
			drag : false,
		} ];

		/////////////////////////数据过滤///////////////////////////////////
		function filter(treeId, parentNode, childNodes)
		{

			if (!childNodes)
				return null;
			for ( var i = 0, l = childNodes.length; i < l; i++)
			{
				childNodes[i].name = childNodes[i].name.replace(/\.n/g, '.');
			}
			return childNodes;
		}
		/////////////////////////下面是处理增删改节点////////////////////////////////////////
		
		//节点被删除之前的事件,并且根据返回值确定是否允许删除操作
		var flag="0";
		function beforeRemove(treeId, treeNode)
		{
			var zTree = $.fn.zTree.getZTreeObj("treeDemo");
			zTree.selectNode(treeNode);
			
			if(confirm("确认删除 笔记本 “" + treeNode.name + "”吗？"))
				{$.post("${contextPath!}/bottom/deleteNotesFolders",
						{ "ids" : treeNode.id },
						function(data)
						{//返回数据库标示
							if(data != treeNode.id)
							{		
								alert("删除“" + treeNode.name + "”笔记本失败！\n该笔记本下还存在笔记本，请先删除子笔记本！\n请按F5刷新界面！");
							}
						}
					)
				}
			return true;
		}
		//确认是否允许删除节点，允许的话，更新节点数据
		function beforeRename(treeId, treeNode, newName)
		{
			if (treeNode.name == newName) 
			{
				return true;
			}
			else if (newName.length == 0)
			{
				alert("节点名称不能为空.");
				return false;
			}
			else{
				$.ajax({
					type : "post",
					url : "${contextPath!}/bottom/updateNotesFolders",
					data : { "ids" : treeNode.id, "names" : newName },
					dataType : "html",
					contentType: "application/x-www-form-urlencoded; charset=UTF-8",
					async: false,
					success:function(data){
						if(data == treeNode.id){
							return true;
				     	}else{
				     		alert("修改<" + treeNode.name + ">笔记本名称失败！");
							return false;
				     	}
					}
				});
				
				return true;
			}
		}
		//新增文件夹功能
		
		
		var newCount = 1;
		function addHoverDom(treeId, treeNode)
		{

			var sObj = $("#" + treeNode.tId + "_span");
			if (treeNode.editNameFlag || $("#addBtn_" + treeNode.tId).length > 0)
				return;
			//1.点击生成新的子文件夹
			var addStr = "<span class='button add' id='addBtn_" + treeNode.tId + "' title='新增笔记本' onfocus='this.blur();'></span>";
			sObj.after(addStr);
			var btn = $("#addBtn_" + treeNode.tId);
			if (btn)btn.bind("click", function()
				{
					var addName = "新增笔记本" + (newCount++);//岗位初始化名称
					
					$.ajax({
						type : "post",
						url : "${contextPath!}/bottom/saveNotesFolders",
						data : { 
							"pIds" : treeNode.id, 
							"names" : addName, 
						},
						dataType : "html",
						contentType: "application/x-www-form-urlencoded; charset=UTF-8",
						async: false,
						success:function(data){
					     	if(data != ""){
								var zTree = $.fn.zTree.getZTreeObj("treeDemo");
					     		zTree.addNodes(treeNode, {id : data, pId : treeNode.id, name : addName,isParent : true});
					     	}else{
					     		alert("新增笔记本失败！");
					     	}
						}
					});
					
					return false;
				});
			
			//2.点击是显示笔记的内容
			var accessControlStr = "<span class='button accessControl' id='accessControlBtn_" + treeNode.tId + "' title='点击打开笔记' onfocus='this.blur();'></span>";
			sObj.after(accessControlStr);
			var btn = $("#accessControlBtn_"+treeNode.tId);
			//下面这段是由Origin_♡网友教的，为什么不采用ajax，是因为ie和firefox都不支持，dom结构之外的数据提交
			if (btn) btn.bind("click", function () {
		        // 取得要提交页面的URL
		        var action = "${contextPath!}/notes/getNotes";
		        // 创建Form
		        var form = $('<form></form>');
		        // 设置属性t
		        form.attr('action', action);
		        form.attr('method', 'post');
		        // form的target属性决定form在哪个页面提交
		        // _self -> 当前页面 _blank -> 新页面
		        form.attr('target', '_self');
		        // 创建Input
		        var ids_input = $('<input type="text" name="ids" />');
		        ids_input.attr('value', treeNode.id);
		        // 附加到Form
		        form.append(ids_input);
		        $("body").append(form); 
		        // 提交表单
		        form.submit();
		        console.log("表单已经提交");
		        console.log(treeNode.id);
		        console.log(form.find("input[name='ids']").val());
		        return false;
		      });
		};
		
		
		
		//移开光标时动作
		function removeHoverDom(treeId, treeNode)
		{
			//1.处理添加按钮
			$("#addBtn_" + treeNode.tId).unbind().remove();
			//2.处理点击事件
			$("#accessControlBtn_"+treeNode.tId).unbind().remove();
		};
		///////////////////////////拖拽操作//////////////////////////////////////
		var className = "dark", curDragNodes, autoExpandNode;
		function beforeDrag(treeId, treeNodes)
		{
			className = (className === "dark" ? "" : "dark");
			for ( var i = 0, l = treeNodes.length; i < l; i++)
			{
				if (treeNodes[i].drag === false)
				{
					curDragNodes = null;
					return false;
				} else if (treeNodes[i].parentTId
						&& treeNodes[i].getParentNode().childDrag === false)
				{
					curDragNodes = null;
					return false;
				}
			}
			curDragNodes = treeNodes;
			return true;
		}
		function beforeDrop(treeId, treeNodes, targetNode, moveType, isCopy)
		{
			className = (className === "dark" ? "" : "dark");
			return true;
		}
		//用于捕获节点拖拽操作结束的事件回调函数
		function onDrop(event, treeId, treeNodes, targetNode, moveType, isCopy) {
			className = (className === "dark" ? "":"dark");
			//alert(treeNodes.length + ":"+treeNodes[0].id + ", " + (targetNode ? (targetNode.id + ", " + targetNode.name) : "isRoot" ));
			if( treeNodes.length > 0 && targetNode){
				var dragId = treeNodes[0].id;//被拖拽笔记本
				var targetId = targetNode.id;//拖拽到的笔记本目标
				$.post(
					"${contextPath!}/bottom/updateNotesFolders",
					{ "ids" : dragId, "pIds" : targetId },
					function(data){//返回数据库标示
				     	if(data == "error"){
				     		alert("移动笔记本失败！");
				     	}
					}
				);
			}
		}
		/////////////////////初始化数据///////////////////////////////////////////
		$(document).ready(function()
		{
			$.fn.zTree.init($("#treeDemo"), setting, zNodes);
		});
	</SCRIPT>
	<div>
		<ul id="treeDemo" class="ztree"></ul>
	</div>

</nav>
